<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function read1(){
					let xhr=new XMLHttpRequest()
				xhr.open("GET","person1.xml",true);
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4 && xhr.status==200){
						    let data=xhr.responseXML
							let person=data.querySelector("person")
							document.getElementById("title1").innerHTML=person.querySelector("title").innerHTML
							document.getElementById("name1").innerHTML=person.querySelector("name").innerHTML
							document.getElementById("tag1").innerHTML=person.querySelector("tag").innerHTML
							document.getElementById("achievement1").innerHTML=person.querySelector("achievement").innerHTML
							document.getElementById("describe1").innerHTML=person.querySelector("describe").innerHTML
						}
					}
				}
			
				function read2(){
					//1.创建核心对象 总是这么写
					let xhr=new XMLHttpRequest()
					//2.创建请求(请求服务器上的什么资源)
					xhr.open("GET","person2.xml",true)//第二个填资源路径,false表示同步请求,true表示异步请求
					//3.发送请求 xhr.send() 总是这么写
					xhr.send()
					//4.接收数据`解析`显示在页面上;纯文本不需要解析
					xhr.onreadystatechange =function(){
					if(xhr.readyState==4 &&xhr.status==200){
							let data=xhr.responseXML
							let persons=data.querySelector("person")
							document.getElementById("title2").innerHTML=persons.getAttribute("title")//读属性
							document.getElementById("name2").innerHTML=persons.getAttribute("name")//读属性
							document.getElementById("tag2").innerHTML=persons.getAttribute("tag")//读属性
							document.getElementById("achievement2").innerHTML=persons.getAttribute("achievement")//读属性
							document.getElementById("describe2").innerHTML=persons.getAttribute("describe")//读属性
						}
				}}
		</script>
	</head>
	<body>
		<h1>点击按钮请求XML数据
			<h2>person1.xml的XML文本信息如下：
			<br>
				<br>标题：<span id="title1"></span>
				<br>姓名： <span id="name1"></span>
				<br>头衔： <span id="tag1"></span>
				<br>成就： <span id="achievement1"></span>
				<br>简述： <span id="describe1"></span>
			</h2>
			<button type="button" onclick="read1()">读取XML文本内容</button>
			<hr>
			<h2>person2.xml的XML文本信息如下：
			<br>
				<br>标题：<span id="title2"></span>
				<br>姓名： <span id="name2"></span>
				<br>头衔： <span id="tag2"></span>
				<br>成就： <span id="achievement2"></span>
				<br>简述： <span id="describe2"></span>
			</h2>
			<button type="button" onclick="read2()">读取XML属性内容</button>
		</h1>
	</body>
</html>
